layui.define(['layer', 'miniPage', 'utils', 'element'], function (exports) {
    var $ = layui.jquery,
        layer = layui.layer,
        miniPage = layui.miniPage,
        utils = layui.utils,
        element = layui.element;
    var Vue = window.Vue
    if(!Vue) {
        layer.msg('请引入vue')
        return null
    }
    Vue.component('menuList', {
        template: '<dd :class="{\'default\': data.searchType === \'default\' }">' +
            '<a href="javascript:;" ref="menu" @click="searcher(data)" :class="{\'layui-this\': data.id === currentId}">' +
            '<span class="menu-btn" @click.stop="handleDeleteMenu(data.id)" v-if="data.searchType !== \'default\' "><i class="fa fa-close"></i></span>' +
            '<span class="layui-left-nav">{{data.name}}</span>' +
            '<span class="layui-badge">{{data.searchCounts}}</span>' +
            '</a>' +
            '</dd>',
        props: {
            currentId: {
                type: [String, Number],
                default: ''
            },
            data: {
                type: Object,
                default: function() {
                    return {}
                }
            }
        },
        methods: {
            searcher: function (data) {
                var _id = data.id;
                this.$emit('menu-change', _id);

                $('.left-menu-panel').find('.layui-this').removeClass('layui-this');
            },
            handleDeleteMenu: function (id) {
                $(this.$refs.menu).addClass('show-close');
                this.$emit('menu-delete', id)
            }
        }
    });
    // 侧导航列表
    Vue.component('searcherMenuModular', {
        template: '<dl class="layui-nav-child">' +
            '   <menu-list v-for="item in data" :key="item.id" :data="item" :current-id="currentMenuId" @menu-change="handleMenuChange" @menu-delete="handleDeleteMenu"></menu-list>' +
            '</dl>',
        props: {
            data: {
                type: Array,
                default: function () {
                    return []
                }
            }
        },
        data: function () {
            return {
                currentMenuId: ''
            }
        },
        methods: {
            setCurrentMenuId: function (baseSearchId) {
                this.currentMenuId = +baseSearchId
            },
            handleMenuChange: function (baseSearchId) {
                this.currentMenuId = baseSearchId
                this.$emit('menu-change', baseSearchId)
            },
            handleDeleteMenu: function (id) {
                this.$emit('menu-delete', id)
            }
        }
    });

    var initSearcherMenu = function (config) {
        return new Vue({
            data: function () {
                return {
                    menuList: []
                }
            },
            mounted: function () {
                this.getMenuInfo();
            },
            methods: {
                getMenuInfo: function () {
                    var that = this;
                    utils.Ajax({
                        url: config.menuInfoUrl,
                        dataType: 'json',
                        type: 'get',
                        data: {},
                        success: function (response) {
                            var data = response.data;
                            that.menuList = data;
                            that.setQuery(data);

                            that.$nextTick(function () {
                                element.render('nav');
                                $('.left-menu-panel a').off('click');
                                $(config.el).find('.layui-nav-more').on('click', function (event) {
                                    event.stopPropagation();
                                    var $parent = $(this).parent().parent()
                                    $parent.hasClass('layui-nav-itemed') ? $parent.removeClass('layui-nav-itemed') : $parent.addClass('layui-nav-itemed');
                                })
                            })
                        }
                    })
                },
                menuChangeCallback: function (id) {
                    var obj = {}
                    if (id && config.queryKey) {
                        obj[config.queryKey] = id
                    }
                    utils.addQueryToUrlNoRefresh(obj);
                    this.$refs.searcherMenuModular.setCurrentMenuId(id)
                    if (typeof config.menuChangeCallback === 'function') {
                        config.menuChangeCallback(id)
                    }
                },
                setQuery: function (data) {
                    var queryId = +utils.parseRouterQuery()[config.queryKey];
                    console.log(utils.parseRouterQuery()['baseSearchId']);
                    console.log(queryId);
                    if (!queryId && data.length) {
                        // var _first = data[0];
                        // queryId = _first.id;
                        // this.menuChangeCallback(queryId)
                    } else {
                        this.menuChangeCallback(queryId)
                    }
                },
                handleMenuChange: function(menuId) {
                    this.menuChangeCallback(menuId)
                },
                handleDeleteMenu: function (id) {
                    var that = this;
                    layer.confirm('确定删除此搜索器吗？', {title: '信息', btn: ['确定', '删除'], cancel: function () {
                            $('.show-close').removeClass('show-close');
                        }}, function(index){
                        utils.Ajax({
                            url: 'api/talent_file_list.json',
                            dataType: 'json',
                            type: 'post',
                            data: {id : id},
                            success: function (response) {
                                layer.close(index);
                                utils.dataDelete(id, that.menuList);

                                $('.show-close').removeClass('show-close');

                                // 重置检索条件
                                if (that.menuList.length) {
                                    var _id = that.menuList[0].id;
                                    that.menuChangeCallback(_id)
                                }else {
                                    that.menuChangeCallback(null)
                                }
                            }
                        })
                    }, function () {
                        $('.show-close').removeClass('show-close');
                    });
                }
            },
        }).$mount(config.el);
    }

    exports('searcherMenu', {
        initSearcherMenu: initSearcherMenu
    })
})

